<template>
  <div class="modelTemplateConfig">
    <a-table :columns="columns" :dataSource="dataSource" bordered>
      <template slot="action" slot-scope="text, record, index">
        <a @click="bindModule(record, index)">绑定模板</a>
      </template>
    </a-table>

    <!-- 绑定模板 弹窗 -->
    <a-modal
      :width="800"
      title="绑定模板"
      :visible="modalVisible"
      @ok="addOrUpdate"
      @cancel="modalVisible = false, modalData = {}"
    >
      <a-form-model :model="modalData">
        <a-form-model-item label="模型名称">
          <a-input v-model="modalData.modelName" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="模型名称">
          <a-select v-model="modalData.ids" mode="multiple">
            <a-select-option v-for="(item) in modelSelectList"
             :value="item.value" :key="item.value">
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
export default {
  name: 'modelTemplateConfig',
  data() {
    return {
      dataSource: [],
      columns: [
        { title: '模型名称', key: 'modelName', dataIndex: 'modelName' },
        { title: '操作', dataIndex: 'action', align: 'center', scopedSlots: { customRender: 'action' }, }
      ],
      modalData: {},
      modalVisible: false,
      modelSelectList: [],
      url: {
        dataModelList: '/sjmx2/modelTemplateConfig/dataModelList',
        selectList: '/sjtb/dataCollectionTemplateInfo/selectList',
        addOrUpdate: '/sjmx2/modelTemplateCollectConfig/addOrUpdate',
      }
    }
  },
  mounted() {
    this.selectList();
    this.dataModelList();
  },
  methods: {
    selectList() {
      getAction(this.url.selectList).then((res)=>{
        this.modelSelectList = res.result
      })
    },
    bindModule(data, index) {
      this.modalData = data;
      this.$set(this.modalData, 'ids', data.templateList.map(item => item.templateId));
      this.modalVisible = true;
    },
    addOrUpdate() {
      const { id, ids } = this.modalData;
      let params = {
        modelId: id,
        ids: ids.join(',')
      }
      getAction(this.url.addOrUpdate, params).then((res)=>{
        if(res.code == 200) {
          this.$message.success('操作成功');
          this.modalData = {};
          this.modalVisible = false;
          this.selectList();
        }
      })
    },
    dataModelList() {
      getAction(this.url.dataModelList).then((res)=>{
        this.dataSource = res.result.records
      })
    }
  }
}
</script>

<style lang="less">
.modelTemplateConfig {
  padding: 20px;
  border-radius: 20px;
  background-color: #ffffff;
}
</style>